<script setup lang="ts">
import { ref, watch, nextTick, type ComponentPublicInstance } from "vue"
import * as echarts from "echarts"
import "echarts/renderers"
import { getStatisticsUserTypeApi } from "@/api/billv2"
import columnarUsers from "./columnarUser.vue"
import companyDeils from "./companyDeils.vue"

const chartRefs = ref<any>(null)
const chartRefs2 = ref<any>(null)
const listData = ref<any[]>([])
const listKeys = ref<any[]>([])
const differenceList = ref<any[]>([])
const totals = ref<number>(0)
const number = ref<number>(0)
const difference = ref<number>(0)
const columnarUsersRef = ref<ComponentPublicInstance<InstanceType<typeof columnarUsers>> | null>(null)
const companyDeilsRef = ref<ComponentPublicInstance<InstanceType<typeof companyDeils>> | null>(null)

const getTable = async () => {
  await getStatisticsUserTypeApi({
    startTime: props.enterTimeStart,
    endTime: props.enterTimeEnd
  }).then((res: any) => {
    console.log("getStatisticsTypeApigetStatisticsTypeApigetStatisticsTypeApigetStatisticsTypeApi")
    console.log(res)
    differenceList.value = res.data.differenceList
    difference.value = res.data.difference
    listData.value = res.data.data
    listKeys.value = res.data.key
    number.value = res.data.money
    totals.value = res.data.total
    nextTick(() => {
      echartsInit()
      echartsInit2()
    })
  })
}

// 使用 defineProps 定义组件的props
const props = defineProps({
  enterTimeStart: {
    type: String,
    required: true
  },
  enterTimeEnd: {
    type: String,
    required: true
  }
})
interface DataItem {
  admin_id: number
  count: number
  difference: string
  name: string
  total_amount: string
  total_difference: string
  value: number
}
const echartsInit = () => {
  if (chartRefs.value) {
    console.log("echartsInit")
    console.log("echartsInitechartsInitechartsInitechartsInit", listData.value)
    const chartInstanceBar = echarts.init(chartRefs.value)
    const optionBar = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow"
        }
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true
      },
      xAxis: [
        {
          type: "category",
          data: listKeys.value,
          axisTick: {
            alignWithLabel: true
          }
        }
      ],
      yAxis: [
        {
          type: "value",
          scale: true,
          name: "单位：万元"
        }
      ],
      series: [
        {
          name: "金额",
          type: "bar",
          stack: "Ad",
          emphasis: {
            focus: "series"
          },
          data: listData.value,
          label: { show: true, position: "top" }
        }
      ]
    }
    chartInstanceBar.setOption(optionBar)
    chartInstanceBar.on("click", function (params) {
      console.log("click")
      console.log(params)
      // alert(params.name)
      const dataItem = params.data as DataItem
      if (columnarUsersRef.value && dataItem.value) {
        columnarUsersRef.value.batchShow({
          id: dataItem.admin_id,
          name: dataItem.name
        })
      }
      // window.open("https://www.baidu.com/s?wd=" + encodeURIComponent(params.name))
    })
  }
}
const echartsInit2 = () => {
  if (chartRefs2.value) {
    const chartInstanceBar2 = echarts.init(chartRefs2.value)
    const optionBar2 = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow"
        }
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true
      },
      xAxis: [
        {
          type: "category",
          data: listKeys.value,
          axisTick: {
            alignWithLabel: true
          }
        }
      ],
      yAxis: [
        {
          name: "单位：元",
          scale: true,
          type: "value"
        }
      ],
      series: [
        {
          name: "差额",
          type: "line",
          stack: "Ad",
          emphasis: {
            focus: "series"
          },
          data: differenceList.value
        }
      ]
    }
    chartInstanceBar2.setOption(optionBar2)
    chartInstanceBar2.on("click", function (params) {
      console.log("click")
      console.log(params)
      // const dataItem = params.data as DataItem
      // if (columnarUsersRef.value && dataItem.manual) {
      //   columnarUsersRef.value.batchShow({
      //     type: dataItem.manual,
      //     startTime: props.enterTimeStart,
      //     endTime: props.enterTimeEnd,
      //     libraryType: 1
      //   })
      // }
      // window.open("https://www.baidu.com/s?wd=" + encodeURIComponent(params.name))
    })
  }
}

const getDeils = () => {
  if (companyDeilsRef.value) {
    companyDeilsRef.value.batchShow({})
  }
}

watch([() => listData, () => props.enterTimeStart, () => props.enterTimeEnd], getTable, { immediate: true })
watch([() => differenceList, () => props.enterTimeStart, () => props.enterTimeEnd], getTable, { immediate: true })
</script>

<template>
  <div class="echartsUsers">
    <div class="echartsUsersItem">
      <div @click="getDeils">总金额:{{ number }} (万元)</div>
      <div ref="chartRefs" class="box" />
    </div>
    <div class="echartsUsersItem">
      <div @click="getDeils">差额:{{ difference }} (元)</div>
      <div ref="chartRefs2" class="box" />
    </div>
    <columnarUsers ref="columnarUsersRef" />
    <companyDeils ref="companyDeilsRef" />
  </div>
</template>

<style scoped lang="scss">
.echartsUsers {
  display: flex;
  // flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  .echartsUsersItem {
    width: calc(50% - 10px);
    height: 500px;
    .box {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
